<template>
  <div class="work-down">
    <!-- dropdown类型 -->
    <a-dropdown
      :getPopupContainer="
        triggerNode => {
          return triggerNode.parentNode || document.body;
        }
      "
      :trigger="['click']"
    >
      <a @click.prevent>
        {{ dropName }}
        <DownOutlined style="color: #000" />
      </a>
      <template #overlay>
        <a-menu @click="dropClick">
          <a-menu-item :key="item[keyValue]" v-for="item in list">{{ item[keyName] }}</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup name="DropDown">
import { onMounted, reactive, ref } from 'vue';

const props = defineProps({
  //  需遍历的数组
  list: {
    type: Array,
    default: () => []
  },
  //  下拉的名字
  defaultName: {
    type: String,
    default: '选中名称'
  },
  //key绑定的值
  keyValue: {
    type: String,
    default: ''
  },
  //下拉显示的名字
  keyName: {
    type: String,
    default: ''
  }
});

const emits = defineEmits(['dropClick']);
// 下拉选中的名字
const dropName = ref('');

onMounted(() => {
  dropName.value = props.defaultName;
});

// 下拉点击
const dropClick = ({ key }) => {
  if (props.list.find(item => item[props.keyValue] == key)) {
    dropName.value = props.list.find(item => item[props.keyValue] == key)[props.keyName];
  }
  emits('dropClick', key);
};

// 改变名称
const changeDropname = (val) => {
  dropName.value = val;
}

defineExpose({
  changeDropname,
})
</script>

<style lang="less" scoped>
.work-down {
  display: inline-block;
}
.ant-dropdown-link {
  color: #000 !important;
}
:deep(.tree-drop .ant-dropdown-menu-item:hover) {
  background-color: #fff !important;
}
</style>
